<template>
  <article class="col-7 fl">
    <div class="u-r-cont">
      <section>
        <div>
          <section class="c-infor-tabTitle c-tab-title">
            <a href="javascript: void(0)" title="我的订单" class="current">
              订单列表
            </a>
          </section>
        </div>
        <div class="mt40">
          <section v-if="orderList.length === 0" class="no-data-wrap">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam">您还没有订单哦！</span>
          </section>
          <div
            style="float: right; margin-bottom: 5px;"
            v-if="orderList.length > 0"
          >
            <el-button
              type="danger"
              size="mini"
              :disabled="removeBtn"
              @click="removeOrderList"
              >批量删除</el-button
            >
          </div>
          <!-- 表格 -->
          <el-table
            v-if="orderList.length > 0"
            :data="orderList"
            border
            fit
            highlight-current-row
            @selection-change="handleSelectionChange"
            ref="multipleTable"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="课程信息" align="center">
              <template slot-scope="scope">
                <div class="info">
                  <div class="pic">
                    <img
                      :src="scope.row.courseCover"
                      alt="scope.row.courseTitle"
                      width="100px"
                    />
                  </div>
                  <div class="title">
                    <a :href="'/course/' + scope.row.courseId">{{
                      scope.row.courseTitle
                    }}</a>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="讲师名称" width="100" align="center">
              <template slot-scope="scope">
                {{ scope.row.teacherName }}
              </template>
            </el-table-column>
            <el-table-column label="价格" width="100" align="center">
              <template slot-scope="scope">
                {{ scope.row.totalFee / 100 }}
              </template>
            </el-table-column>
            <el-table-column label="创建时间" width="180" align="center">
              <template slot-scope="scope">
                {{ scope.row.gmtCreate }}
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="订单状态"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.status === 0 ? 'warning' : 'success'"
                  >{{ scope.row.status === 0 ? "未支付" : "已支付" }}</el-tag
                >
              </template>
            </el-table-column>

            <el-table-column label="操作" width="150" align="center">
              <template slot-scope="scope">
                <router-link
                  v-if="scope.row.status === 0"
                  :to="'/order/' + scope.row.id"
                >
                  <el-button type="text" size="mini" icon="el-icon-edit"
                    >去支付</el-button
                  >
                </router-link>
                <router-link
                  v-if="scope.row.status === 1"
                  :to="'/course/' + scope.row.courseId"
                >
                  <el-button type="text" size="mini" icon="el-icon-edit"
                    >去学习</el-button
                  >
                </router-link>
                <i
                  class="el-icon-delete"
                  style="cursor:pointer"
                  title="删除订单"
                  @click="removeById(scope.row.id)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
    </div>
  </article>
</template>

<script>
import order from "../../api/order";
export default {
  data() {
    return {
      orderList: [],
      payLog: {
        orderNo: null,
        payTime: null,
        totalFee: null,
        transactionId: null,
      },
      selecTion: [],
      removeBtn: false,
    };
  },
  created() {
    this.getOrderList();

    if (this.$route.query.trade_no) {
      this.payLog.orderNo = this.$route.query.out_trade_no;
      this.payLog.payTime = this.$route.query.timestamp;
      this.payLog.totalFee = this.$route.query.total_amount;
      this.payLog.transactionId = this.$route.query.trade_no;

      order.payHistory(this.payLog).then((resp) => {
        if (resp) {
          this.getOrderList();

          return;
        }
      });
    }
  },
  methods: {
    getOrderList() {
      order.getOrderList().then((resp) => {
        this.orderList = resp.data.orderList;
      });
    },
    /**
     * 批量删除
     */
    removeOrderList() {
      if (this.selecTion.length > 0) {
        this.removeBtn = true;
        this.$confirm("此操作将提交选中项, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            const idList = [];
            for (const v of this.selecTion) {
              idList.push(v.id);
            }

            console.log(idList);
            order.removeOrderList(idList).then((resp) => {
              if (resp) {
                this.$message.success(resp.message);
                this.removeBtn = false;
                this.getOrderList();
              }
            });
            this.removeBtn = false;
          })
          .catch(() => {
            this.removeBtn = false;
            this.$notify({
              title: "提示",
              message: "已取消批量提交",
              type: "info",
              duration: 2000,
            });
          });
      } else {
        this.$notify({
          title: "提示",
          message: "请勾选要提交的项！",
          type: "warning",
          duration: 2000,
        });
      }

      //
    },
    //单个删除
    removeById(id) {
      this.$confirm("此操作将删除该订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          order.removeOrderById(id).then((resp) => {
            if (resp) {
              this.$message, success(resp.message);
              this.getOrderList();
            }
          });
        })
        .catch(() => {
          this.$notify({
            title: "提示",
            message: "已取消删除",
            type: "info",
            duration: 2000,
          });
        });
    },
    handleSelectionChange(val) {
      this.selecTion = val;
    },
  },
};
</script>

<style></style>
